<template>
  <z-paging
    ref="pagingRef"
    use-page-scroll
    v-model="dataList"
    :refresher-enabled="openRefresher"
    @query="getListData"
  >
    <view class="listWrap">
      <template v-for="item of dataList" :key="item.id">
        <view class="listItem">
          <ListItem :item="item || {}"></ListItem>
        </view>
      </template>
    </view>
  </z-paging>
</template>

<script setup>
import { ref } from 'vue';
//必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js';

import ListItem from '@/components/IndexList/item.vue';

import articleManagement from '@/api/articleManagement.js';

const pagingRef = ref(null);
//类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
useZPaging(pagingRef);
//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
const dataList = ref([]);

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const getListData = (pageNo, pageSize) => {
  articleManagement.gteArticleListToIndex().then((res) => {
    console.log('list', res);
    pagingRef.value.complete(res.data);
  });
};

const openRefresher = ref(true);
onPageScroll((e) => {
  openRefresher.value = !e.scrollTop;
});
</script>
<style lang="scss">
.listWrap {
  padding: 20rpx 5px 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
// 个人中心样式
.mine_style {
  position: relative;
  z-index: 9;
}
.listItem {
  width: 335rpx;
  &:nth-child(2n) {
    padding-right: 0;
  }
  &:nth-child(2n - 1) {
    padding-left: 0;
  }

  &:nth-child(1),
  &:nth-child(2) {
    padding-top: 0;
  }
}
</style>
